<template>
  <div id="container" v-loading="fullscreenLoading"></div>
</template>
<script language="javascript">
  import { listFactory } from "@/api/basic/factory/factory";
  export default {
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 30,
        },
        fullscreenLoading: true,
      };
    },
    created() {
      // this.getList();
    },
    methods: {
      /** 查询工厂基础信息列表 */
      getList() {
        let center = [120.54496, 36.222742];
        listFactory(this.queryParams).then((response) => {
          this.factoryList = response.rows;
          this.fullscreenLoading = false;
          this.$nextTick(() => {
            if (response.rows.length > 0) {
              // center = [];
              // center.push(response.rows[0].lng);
              // center.push(response.rows[0].lat);
            }
            this.initMap(center)
          });
        }).catch((error) => {
          this.fullscreenLoading = false;
          // this.common.thisError(error);
          this.initMap(center);
        });

      },
      // 实例化地图
      initMap(center) {
        var _this = this;
        var opts = {
          subdistrict: 0,
          extensions: "all",
          level: "city",
        };
        //利用行政区查询获取边界构建mask路径
        //也可以直接通过经纬度构建mask路径
        var district = new AMap.DistrictSearch(opts);
        district.search("崂山区", function (status, result) {
          var bounds = result.districtList[0].boundaries;
          var mask = [];
          for (var i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]]);
          }
          var map = new AMap.Map("container", {
            center: center,
            disableSocket: true,
            viewMode: "3D",
            showLabel: false,
            labelzIndex: 130,
            pitch: 40,
            mapStyle: "amap://styles/blue",
            zoom: 10.9,
            layers: [
              new AMap.TileLayer.RoadNet({
                //rejectMapMask:true
              }),
              new AMap.TileLayer.Satellite(),
            ],
          });
          //var maskerIn = new AMap.Marker({
          //   position:[120.46803,36.10811],
          // map:map
          //})
          var data = _this.factoryList;
          var lnglats = [];

          for (var i in data) {
            var position = [];
            if (data[i].lat != null) {
              position.push(Number(data[i].lng));
              position.push(Number(data[i].lat));
              lnglats.push({
                title: data[i].name,
                address: data[i].address == null ? "- -" : data[i].address,
                position: position,
                peopleNum: data[i].peopleNum == null ? "- -" : data[i].peopleNum,
                scale: data[i].scale == null ? "- -" : data[i].scale,
                fundNum: data[i].fundNum == null ? "- -" : data[i].fundNum,
                leader: data[i].leader == null ? "- -" : data[i].leader,
                phone: data[i].phone == null ? "- -" : data[i].phone,
                desc: data[i].desc == null ? "- -" : data[i].desc,
                pic:
                  data[i].pic == null || data[i].pic == "" ? "- -" : data[i].pic,
              });
            }
          }
          var clickEventListener = map.on("click", function (e) {
            // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
            // console.log(e)
          });
          // 创建一个 Icon
          var startIcon = new AMap.Icon({
            // 图标尺寸
            // size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: require("@/assets/images/mark.png"),
            // 图标所用图片大小
            // imageSize: new AMap.Size(135, 40),
            // 图标取图偏移量
            // imageOffset: new AMap.Pixel(-9, -3)
          });
          var infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -30),
          });
          for (var i = 0, marker; i < lnglats.length; i++) {
            var marker = new AMap.Marker({
              position: lnglats[i].position,
              icon: startIcon,
              map: map,
              extData: {
                markertitle: lnglats[i].title,
                markerAddress: lnglats[i].address,
              },
            });
            // console.log(marker.getExtData(), "测试1111111111111");
            var title = marker.getExtData().markertitle;
            var address = marker.getExtData().markerAddress;
            // marker.content = title + "\n" + address;
            // (marker.content =
            //   "<div class='de'>名称: " +
            //   title +
            //   "</div>" +
            //   "<div class='de'>地址: " +
            //   address +
            //   "</div>" +
            //   "<div class='de'>人数: " +
            //   lnglats[i].peopleNum +
            //   "" +
            //   "； &nbsp;规模: " +
            //   lnglats[i].scale +
            //   "；&nbsp;资金: " +
            //   lnglats[i].fundNum +
            //   "</div>" +
            //   "<div class='de'>负责人: " +
            //   lnglats[i].leader +
            //   "； &nbsp;联系方式: " +
            //   lnglats[i].phone +
            //   "</div>" +
            //   "<div class='de'>工厂描述: " +
            //   lnglats[i].desc +
            //   "</div>" +
            //   "<div class='de'> <img style='width:100%;cursor: pointer;' src='" +
            //   lnglats[i].pic +
            //   "' /></div>"), //设置文本标注内容
            (marker.value = {
              title: title,
              address: address,
              peopleNum: lnglats[i].peopleNum,
              scale: lnglats[i].scale,
              fundNum: lnglats[i].fundNum,
              leader: lnglats[i].leader,
              phone: lnglats[i].phone,
              pic: lnglats[i].pic,
            }),
              // marker.content = "第" + (i + 1) + "个Marker";
              marker.on("click", markerClick);
            // marker.setTitle('我是marker的title');
            marker.setLabel({
              offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
              content:
                "<div class='info'>" +
                (i + 1) +
                "." +
                lnglats[i].title +
                "</div>", //设置文本标注内容
              direction: "top", //设置文本标注方位
            });
          }
          // marker.setTitle('我是marker的title');

          function markerClick(e) {
            _this.$emit("openMap", e.target.value);
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
          }
          //var maskerOut = new AMap.Marker({//区域外的不会显示
          //    map:map
          // })
          //添加描边
          for (var i = 0; i < bounds.length; i += 1) {
            new AMap.Polyline({
              path: bounds[i],
              // strokeColor: "#01b0f3",
              strokeColor: "#00baff",
              strokeWeight: 2,
              strokeOpacity: 1, //线透明度

              // fillColor: "red", //填充色
              // fillOpacity: 0.35, //填充透明度
              map: map,
            });
          }
        });
      },
      //打开图片
      bigImg(e) {
        console.log(e);
      },
    },
    async mounted() {
      // var _this = this;
      // this.getList();
      // setTimeout(() => {
      //   this.initMap();
      // }, 200);
      await this.$nextTick(() => {
        this.getList();
      });
    },
  };
</script>
<style>
  body,
  html,
  #container {
    margin: 0;
    width: 100%;
    height: 110%;
  }

  .info {
    background: rgba(34, 101, 92, 0.55);
    color: #ffffff;
    padding: 5px 7px;
  }

  .amap-marker-label {
    border: 1px solid rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
  }

  .amap-info-content {
    background-color: rgba(9, 59, 118, 0.85);
    /* opacity: 0.75; */
    /* background-color: #42a9ff; */
    border: 1px solid #42a9ff;
    width: 350px;
    color: white;
  }

  .amap-info-close {
    top: 1px;
    right: 2px !important;
  }

  .amap-info-content {
    padding: 10px 12px 10px 12px;
  }

  .de {
    background: rgba(88, 134, 127, 0);
    color: #ffffff;
    font-size: 12px;
    padding: 0;
  }
</style>
